<template>
  <div id="home-view">
    <HeadNav type="main"></HeadNav>
    <div class="home-main">
      <div class="menu" :style="heightResize">

        <div class="menu-title">常驻管理 Usual</div>

        <div class="menu-item-1" :style="{background : routeType === 0 ? '#eae9e9' :''}" @click="pushRoute('',0)">
          <div class="text">控制台</div>
          <font-awesome-icon style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>

        <div class="menu-item-1"  :style="{background : routeType === 1 ? '#eae9e9' :''}" @click="pushRoute('',1)">
          <div class="text">审核管理</div>
          <font-awesome-icon v-if="routeType === 1" style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-down']"/>
          <font-awesome-icon v-else style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>

        <div v-if="routeType===36||routeType===37||routeType===1" style="border-left: solid thin #b9b9b9;margin-left: 10px">
          <div class="menu-item-2">
            <div class="text" :style="{color : routeType === 36 ? '#4799ff' :''}" @click="pushRoute('',36)">送审管理</div>
          </div>
          <div class="menu-item-2">
            <div class="text" :style="{color : routeType === 37 ? '#4799ff' :''}" @click="pushRoute('',37)">举报管理</div>
          </div>
        </div>

<!--        <div class="menu-item-1" :style="{background : routeType === 38 ? '#eae9e9' :''}" @click="pushRoute('',38)">-->
<!--          <div class="text">待办管理</div>-->
<!--          <font-awesome-icon style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>-->
<!--        </div>-->


        <div class="menu-title">我的知桨 Course</div>

        <div v-for="(course,index) in courseList">
          <div class="menu-item-1" :style="{background : linkId === course.id ? '#eae9e9' :''}" @click="pushRoute(course.id,2)">
            <div class="text">{{ course.name }}</div>
            <font-awesome-icon @click="changeTabStatus(index,0)" v-if="linkId === course.id" style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-down']"/>
            <font-awesome-icon @click="changeTabStatus(index,0)" v-else style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
          </div>

          <div v-if="linkId === course.id" style="border-left: solid thin #b9b9b9;margin-left: 10px">
            <div class="menu-item-2" >
              <div class="text" :style="{color : linkId === course.id && routeType === 3 ? '#4799ff' :''}" @click="pushRoute(course.id,3)">信息编辑</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === course.id && routeType === 4 ? '#4799ff' :''}" @click="pushRoute(course.id,4)">内容编辑</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === course.id && routeType === 5 ? '#4799ff' :''}" @click="pushRoute(course.id,5)">用户管理</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === course.id && routeType === 6 ? '#4799ff' :''}" @click="pushRoute(course.id,6)">评论管理</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === course.id && routeType === 7 ? '#4799ff' :''}" @click="pushRoute(course.id,7)">箴言管理</div>
            </div>
<!--            <div class="menu-item-2">-->
<!--              <div class="text" :style="{color : linkId === course.id && routeType === 8 ? '#4799ff' :''}" @click="pushRoute(course.id,8)">私信管理</div>-->
<!--            </div>-->
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === course.id && routeType === 9 ? '#4799ff' :''}" @click="pushRoute(course.id,9)">举报审核</div>
            </div>
          </div>
        </div>

        <div class="menu-title">我的浪屿 Island</div>

        <div v-for="island in islandList">
          <div class="menu-item-1" :style="{background : linkId === island.id ? '#eae9e9' :''}" @click="pushRoute(island.id,10)">
            <div class="text">{{ island.name }}</div>
            <font-awesome-icon v-if="linkId === island.id" style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-down']"/>
            <font-awesome-icon v-else style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
          </div>

          <div v-if="linkId === island.id" style="border-left: solid thin #b9b9b9;margin-left: 10px">
            <div class="menu-item-2" >
              <div class="text" :style="{color : linkId === island.id && routeType === 11 ? '#4799ff' :''}" @click="pushRoute(island.id,11)">信息编辑</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === island.id && routeType === 12 ? '#4799ff' :''}" @click="pushRoute(island.id,12)">用户管理</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === island.id && routeType === 13 ? '#4799ff' :''}" @click="pushRoute(island.id,13)">帖子管理</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === island.id && routeType === 14 ? '#4799ff' :''}" @click="pushRoute(island.id,14)">评论管理</div>
            </div>
<!--            <div class="menu-item-2">-->
<!--              <div class="text" :style="{color : linkId === island.id && routeType === 15 ? '#4799ff' :''}" @click="pushRoute(island.id,15)">私信管理</div>-->
<!--            </div>-->
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === island.id && routeType === 16 ? '#4799ff' :''}" @click="pushRoute(island.id,16)">举报审核</div>
            </div>
          </div>
        </div>

        <div class="menu-title">我的提问 Question</div>

        <div v-for="question in questionList">
          <div class="menu-item-1" :style="{background : linkId === question.id ? '#eae9e9' :''}" @click="pushRoute(question.id,17)">
            <div class="text">{{ question.title }}</div>
            <font-awesome-icon v-if="linkId === question.id" style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-down']"/>
            <font-awesome-icon v-else style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
          </div>

          <div v-if="linkId === question.id" style="border-left: solid thin #b9b9b9;margin-left: 10px">
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === question.id && routeType === 18 ? '#4799ff' :''}" @click="pushRoute(question.id,18)">问题编辑</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === question.id && routeType === 19 ? '#4799ff' :''}" @click="pushRoute(question.id,19)">观点管理</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === question.id && routeType === 20 ? '#4799ff' :''}" @click="pushRoute(question.id,20)">回答管理</div>
            </div>
<!--            <div class="menu-item-2">-->
<!--              <div class="text" :style="{color : linkId === question.id && routeType === 21 ? '#4799ff' :''}" @click="pushRoute(question.id,21)">私信管理</div>-->
<!--            </div>-->
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === question.id && routeType === 22 ? '#4799ff' :''}" @click="pushRoute(question.id,22)">评论管理</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === question.id && routeType === 23 ? '#4799ff' :''}" @click="pushRoute(question.id,23)">举报审核</div>
            </div>
            <div class="menu-item-2">
              <div class="text" :style="{color : linkId === question.id && routeType === 24 ? '#4799ff' :''}" @click="pushRoute(question.id,24)">送审审核</div>
            </div>
          </div>
        </div>


        <div class="menu-title">公共空间 Public</div>

        <div class="menu-item-1" v-if="userInfo && userInfo.role>2" :style="{background : routeType === 25 ? '#eae9e9' :''}" @click="pushRoute('',25)">
          <div class="text">用户管理</div>
          <font-awesome-icon style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>

        <div class="menu-item-1" v-if="userInfo && userInfo.role>2" :style="{background : routeType === 26 ? '#eae9e9' :''}" @click="pushRoute('',26)">
          <div class="text">知桨管理</div>
          <font-awesome-icon v-if="routeType === 26" style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-down']"/>
          <font-awesome-icon v-else style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>

        <div v-if="routeType >= 26 && routeType <= 28" style="border-left: solid thin #b9b9b9;margin-left: 10px">
          <div class="menu-item-2">
            <div class="text" :style="{color : routeType === 27 ? '#4799ff' :''}" @click="pushRoute('',27)">问题管理</div>
          </div>
          <div class="menu-item-2">
            <div class="text" :style="{color : routeType === 28 ? '#4799ff' :''}" @click="pushRoute('',28)">测试管理</div>
          </div>
        </div>

        <div class="menu-item-1" v-if="userInfo && userInfo.role>2" :style="{background : routeType === 29 ? '#eae9e9' :''}" @click="pushRoute('',29)">
          <div class="text">浪屿管理</div>
          <font-awesome-icon style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>
        <div class="menu-item-1" v-if="userInfo && userInfo.role>2" :style="{background : routeType === 30 ? '#eae9e9' :''}" @click="pushRoute('',30)">
          <div class="text">问题管理</div>
          <font-awesome-icon style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>

        <div class="menu-item-1" v-if="userInfo && userInfo.role>2" :style="{background : routeType === 31 ? '#eae9e9' :''}" @click="pushRoute('',31)">
          <div class="text">平台配置</div>
          <font-awesome-icon v-if="routeType === 31" style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-down']"/>
          <font-awesome-icon v-else style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>

        <div v-if="routeType >= 31 && routeType <= 33" style="border-left: solid thin #b9b9b9;margin-left: 10px">
          <div class="menu-item-2">
            <div class="text" :style="{color : routeType === 32 ? '#4799ff' :''}" @click="pushRoute('',32)">篝火管理</div>
          </div>
          <div class="menu-item-2">
            <div class="text" :style="{color : routeType === 33 ? '#4799ff' :''}" @click="pushRoute('',33)">外观管理</div>
          </div>
        </div>
        <div class="menu-item-1" v-if="userInfo && userInfo.role === 2" :style="{background : routeType === 34 ? '#eae9e9' :''}" @click="pushRoute('',34)">
          <div class="text">题目管理</div>
          <font-awesome-icon style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>
        <div class="menu-item-1" v-if="userInfo && userInfo.role === 2" :style="{background : routeType === 35 ? '#eae9e9' :''}" @click="pushRoute('',35)">
          <div class="text">测试管理</div>
          <font-awesome-icon style="color: #969595;font-size: 10px" :icon="['fas', 'chevron-right']"/>
        </div>
      </div>
      <div class="main">
        <router-view :key="$route.fullPath" ></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import HeadNav from "@/components/HeadNav";
export default {
  name: "HomeView",
  components:{
    HeadNav
  },
  data() {
    return {
      routeType:0,
      userInfo:null,
      routeNameList:[
        "dashboard",
        "audit-check-page",
        "course-manage",
        "course-info-edit",
        "course-structure-edit",
        "course-user-page",
        "course-comment-page",
        "course-talk-page",
        "course-message-page",
        "course-report-page",
        "island-manage",
        "island-info-edit",
        "island-user-page",
        "island-post-page",
        "island-comment-page",
        "island-message-page",
        "island-report-page",
        "question-manage",
        "question-info-edit",
        "question-point-page",
        "question-answer-page",
        "question-message-page",
        "question-comment-page",
        "question-report-page",
        "question-check-page",
        "user-page",
        "course-page",
        "course-problem-page",
        "course-exam-page",
        "island-page",
        "question-page",
        "config",
        "bonfire-page",
        "appearance-config",
        "course-problem-page",
        "course-exam-page",
        "audit-check-page",
        "audit-report-page",
        "todo-page"
      ],
      linkId:"",

      heightResize: {
        'height': '700px'
      },
      courseList: [
        {
          id: "1601204397644980225",
          name: "计算机组成原理期末冲刺",
          isOpen:false,
        }
      ],
      islandList: [
        {
          id: "1601204397644980226",
          name: "胡吃海喝计划",
          isOpen:false,
        }
      ],
      questionList: [{
        id: "1465157930033623041",
        title: "为什么近几年自称抑郁症患者越来越多？",
        isOpen:false,
        points: [
          {
            id: "1465157930067177474",
            keyword: "话语体系本身的问题导致抑郁症被当做挡箭牌来形象且内涵的表达自己的情感。",
          },
          {
            id: "1520066266798907394",
            keyword: "互联网的加持使得情感类产品更容易流通，产生的共鸣也会更强烈。",
          }
        ]
      }]
    }
  },
  watch:{
    $route(to,from){
      this.flushRouteNav()
    }
  },
  mounted() {
    this.heightResize = {
      'height': document.documentElement.clientHeight - 120 + 'px'
    }
    this.getProfile()
    this.listAdminCourse()
    this.listAdminIsland()
    this.listManageQuestion()

    this.flushRouteNav()
  },
  methods: {
    flushRouteNav(){
      console.log("触发")
      let routeName = this.$route.name;
      this.routeType =  this.routeNameList.indexOf(routeName)
      this.linkId = this.$route.params.id
    },
    getProfile(){
      this.$api.getProfile()
          .then((res) => {
            console.log("用户信息",res.data)
            this.userInfo = res.data;
          });
    },
    listAdminCourse() {
      this.$api.listAdminCourse()
          .then((res) => {
            this.courseList = res.data;
          });
    },
    listAdminIsland() {
      this.$api.listAdminIsland()
          .then((res) => {
            this.islandList = res.data;
          });
    },
    listManageQuestion() {
      this.$api.listManageQuestion()
          .then((res) => {
            this.questionList = res.data;
          });
    },




    pushRoute(id,routeType) {
      if(this.routeType === routeType && this.linkId === id){
        this.routeType = 0
        this.linkId = ""
        this.$router.push({
          name: this.routeNameList[0],
        })
        return
      }

      this.routeType = routeType
      this.linkId = id
      this.$router.push({
        name: this.routeNameList[routeType],
        params: {
          id
        }
      })
    },

    toCourseInfoEdit(courseId,index) {
      this.$router.push({
        name: 'course-info-edit',
        params: {
          courseId
        }
      })
    },
    toCourseStructureEdit(courseId) {
      this.$router.push({
        name: 'course-structure-edit',
        params: {
          courseId
        }
      })
    },

    toManageCourse(courseId) {
      this.$router.push({
        name: 'course-manage',
        params: {
          courseId
        }
      })
    },


    changeTabStatus(index1,index2){
      console.log("触发",index1,index2,this.courseTabStatus[index1][index2])
      this.courseTabStatus[index1][index2] = !this.courseTabStatus[index1][index2]
      console.log(this.courseTabStatus[index1][index2])
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped lang="scss">

::-webkit-scrollbar {
  width: 8px;
}

#home-view {
  width: 100%;
  min-width: 640px;
  margin: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  .home-main{
    margin-top: 90px;
    width: 90%;
    display: flex;
    flex-direction: row;


    .menu {
      width: 260px;
      height: 700px;
      overflow-y: scroll;

      position: sticky;
      top: 90px;
      display: flex;
      flex-direction: column;
      border-right: solid thin #b7b7b7;


      .menu-title {
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 13px;
        font-weight: bold;
        color: #adadad;
      }

      .menu-item-1 {
        padding: 5px;
        margin: 5px 5px 5px 0px;
        color: #313131;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 5px;

        .text {
          max-width: 220px;
          font-size: 14px;
        }

        .text:hover {
          color: #7eb6fd;
          cursor: pointer;
        }
      }

      .menu-item-2 {
        margin: 10px 10px 10px 5px;
        color: #7c7c7c;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .text {
          max-width: 200px;
          font-size: 13px;
        }

        .text:hover {
          cursor: pointer;
          color: #7eb6fd;
        }
      }
    }

    .main {
      width: 100%;
      margin-left: 20px;
      min-height: 1200px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
